<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>翱翔留言板</title>
  <link rel="stylesheet" href="/static/w3/css/index.css">
</head>
<body>
<div class="container">
  <div class="title">
    <h3>翱翔留言板</h3>
    <span class="weather">北京 雷阵雨转小雨</span>
  </div>

  <div class="form-group">
    <input id="user" type="text" class="form-control" placeholder="请输入昵称">
  </div>
  <div class="form-group">
    <textarea id="content" class="form-control" cols="30" rows="8" placeholder="请输入留言信息..."></textarea>
  </div>
  <div class="form-group">
    <button class="btn btn-default">提交</button>
  </div>

  <div class="messages">
    <div class="title">
      最新留言(5)
    </div>
    <div class="list">


    </div>
  </div>
</div>
  <script src="/static/w3/scripts/lib/axios.js"></script>
  <script>
    //1.显示天气
    axios
    .get("http://nllcoder.com:8001/weather")
    .then(function (res) {
      //打印不出来，抓包可以
      /*
      {
    "status": 0,
    "result": {
      "location": {
        "country": "中国",
        "province": "河南省",
        "city": "信阳市",
        "name": "信阳",
        "id": "411500"
      },
      "now": {
        "text": "晴",
        "temp": 30,
        "feels_like": 30,
        "rh": 37,
        "wind_class": "5级",
        "wind_dir": "东风",
        "uptime": "20220824153000"
      }
    },
    "message": "success"
  }
      */
      console.log(res.data+"返回的数据");

      //当获取天气数据成功,后端定义的数据返回格式
      if(res.data.status==0)
      {
        let city=res.data.result.location.city;
        let now=res.data.result.now;

        let str=`${city} ${now.text} ${now.temp}度 ${now.wind_class}`;
        //设置天气
        document.querySelector('.weather').textContent=str;
      }
      else {
        console.log("获取失败");
      }
    })
    .catch(function (err) {
      console.log(err);
    });
    //2.显示留言列表
    function loadMessages() {
      axios.get("http://nllcoder.com:8001/messages")
      .then(function (res) {
        //留言数组
        //console.log(res.data);
         let messages=res.data||[];

         console.log(messages[0]);
         //2.1 显示留言条数
        document.querySelector('.messages .title').textContent=
                `最新留言(${messages.length})`;
        //2.1 显示留言列表
        let html='';
        //遍历数组，拼接列表
        for(let i=0;i<messages.length;i++){
          let msg=`
        <div class="message">
          <div class="box">
            <img src="${messages[i].avater}" alt="">
            <div class="item">
              <div class="user">${messages[i].user}</div>
              <div class="content">${messages[i].content}</div>
            </div>
          </div>
          <span class="time">${messages[i].time}</span>
          <span class="close" id=${messages[i].id}>X</span>
        </div>`;
          html=html+msg;
      };
        //拼接留言
        document.querySelector('.list').innerHTML=html;
        //确保列表渲染完毕后：
        //4.删除留言
        //4,1获取所有的删除按钮，注册点击事件
        let btns=document.querySelectorAll('.close');
        for(let i=0;i<btns.length;i++)
        {
          let btn=btns[i];
          btn.onclick=function () {
            console.log(btn.id+"删除的id");
            //4.2获取当前点击的删除按钮对应的数据的id
            //4.3向服务器发送delete请求删除数据

            axios
            .delete("http://nllcoder.com:8001/messages/"+btn.id)
            .then(function (res) {
              //4.4删除成功，重新加载留言列表
              loadMessages();
            })
            .catch(function (err) {
              console.log(err);
            })
          }
        }

      })
      .catch(function (err) {
        console.log(err);
      })
      ;
    }

    //3.添加留言
    //3.1给点击按钮注册点击事件
    let btn=document.querySelector('.btn');
    btn.onclick=function () {
      //3.2获取文本框的内容
      let user=document.querySelector("#user").value;
      let content=document.querySelector("#content").value;
      console.log(user+content+"输入");
      //3.3发送请求
      axios
      .post("http://nllcoder.com:8001/messages",
              {user: user,
              content: content,
              avater:"",
              time:new Date()})
      .then(function (res) {
        console.log(res.data);
        //成功，重新加载留言列表
        loadMessages()
      })
      .catch(function (err) {
        console.log(err);
      })

      //3.4清空文本框
      document.querySelector("#user").value='';
      document.querySelector("#content").value='';
    }

    loadMessages();

  </script>

</body>
</html>